iT邦幫忙

2024 iThome 鐵人賽

DAY 1
1

文章同步更新在 CodeFictionist

在後面幾天來介紹那些有時會在其他網站常見的酷炫特效 (ex. 浮動粒子、按鈕彈跳效果...等) 之前,需要先花個幾天談一下 CSS 動畫的基礎,這樣才能更好適應後面部份的內容。

animation@keyframes

基本上,一個 CSS 的動畫由兩個部分所組成:animation 屬性和 @keyframes 規則。
我們可以先來看一小段程式碼:

@keyframes move {
 from {
  left: 0;
 }
 to {
  left: 200px;
 }
}

.element {
 animation: move 2s infinite alternate;
}

範例 - 基礎動畫


解析 animation

我們先來解析上面的 animation: move 2s infinite alternate; 到底做了什麼事。:

  • 首先在我們範例中,第一個屬性 move 是透過 @keyframes 建立的關鍵影格,這點後面再說。
  • 接下來的 2s 代表 animation-duration,簡單來說就是一個動畫的持續時間。
  • infinite 代表 animation-iteration-count,定義動畫重複的次數,在這裡就表示動畫不限次數一直執行。
  • alternate 代表 animation-direction,是用來定義動畫執行一次後是否反方向執行。
    所以上面這段 CSS 動畫就是讓 move 這個關鍵影格以每次 2 秒的時間執行動畫,執行完後反方向再來一次,然後無限重複。

所以在這個範例中我們用到了關鍵影格animation-durationanimation-iteration-count 以及 animation-direction,但其實 animation 遠不只這些屬性。
其它 animation 屬性還有:

  • animation-delay:動畫要延遲多久時間才開始執行。
  • animation-play-state:動畫的執行狀態,可以是 runningpaused,簡而言之就是要動畫執行還是先暫停
  • animation-timing-function:動畫的時間函數,可以在細分成數個項目,預設情況下是套用 ease
    • ease:緩慢開始,然後加速,然後緩慢結束。
    • linear:動畫從頭到尾都是以相同的速度執行。
    • ease-in:緩慢開始,然後加速。
    • ease-out:加速,然後緩慢結束。
    • ease-in-out:緩慢開始,中間加速,然後緩慢結束。

範例 - animation 的時間函數

  • animation-fill-mode:動畫結束後的狀態,可以是 noneforwardsbackwardsboth,預設狀態下會是 none
    • none:動畫結束後,元素會回到原本的狀態。
    • forwards:動畫結束後,元素會保持在動畫的最後一個影格。
    • backwards:動畫開始前,元素會先套用第一個影格的樣式。
    • both:結合 forwardsbackwards 的效果。

範例 - animation-fill-mode

有些人會有疑問,animation-fill-modenonebackwards 測試起來好像沒有差別,在最後一幀的時候位置都是一樣的啊!
但請注意我們範例中的元素背景色,none 在動畫延遲的時間內 (注意範例中我設定動畫啟動延遲 5 秒),背景色會是預設的黃色,而 backwards 則會是第一幀的粉藍色,所以關於 nonebackwards 的差異其實主要體現在設定 animation-delay 後的表現。


解析 @keyframes

前述有講到在 animation 引入了一個 move 這個關鍵影格,這個關鍵影格是透過 @keyframes 來定義的。
什麼是關鍵影格?
讓我們再看看最一開始那段 code:

@keyframes move {
 from {
  left: 0;
 }
 to {
  left: 200px;
 }
}

.element {
 animation: move 2s infinite alternate;
}

我們用 @keyframes 定義了一個名為 move 的關鍵影格,在這個關鍵影格中,move 把 2 秒的 animation-duration 給拆成了兩個關鍵影格點,分別是 from 包起來的區塊以及 to 包起來的區塊。
from 代表動畫的開始狀態,而 to 代表動畫的結束狀態,講白話一點,這裡 move 做的事就是讓元素在 2 秒內從 left: 0; 移動到 left: 200px;,這就是一個最基本的關鍵影格,與 animation 一同構成一個最基本的動畫。

除了 fromto 之外,我們還可以使用百分比來定義關鍵影格,實際上 fromto 就是 0%100% 的簡寫。
至於百分比是誰的百分比呢?
其實這個百分比就是 animation-duration 的百分比。
以上述 2 秒的例子來看, 0% 就是 0s100% 就是 2s,以此類推 50% 就是 1s
我們來為上述例子添加一個在 50% 變成粉紅色的關鍵影格:

@keyframes move {
 from {
  left: 0;
 }
 50% {
  background-color: pink;
 }
 to {
  left: 200px;
 }
}

現在我們的藍色球球會在 1 秒的時候變成粉紅色啦,這就是使用百分比來定義關鍵影格的效果。

範例 - @keyframes

Reference

  1. MDN CSS 動畫

下一篇
Day 02 - CSS 變形基礎
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言